<template>
  <a-card>
    <a-button type="primary" style="position: absolute;right: 25px;top:10px;" v-print="'#print'">打印</a-button>
    <div id="print" >
      <div style="text-align: center;font-weight: bold;font-size: 18px;color: #000;">（江南布衣）服饰有限公司封样单</div>
      <div class="steps-content" style="overflow: hidden">
        <a-row type="flex" justify="start" align="top" style="border: 1px solid;">
          <a-col :span="24">
            <!-- <a-descriptions bordered  :column="{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }" >
              <a-descriptions-item label="款号">
                {{ craftBillDetail.styleId }}
              </a-descriptions-item>
              <a-descriptions-item label="样衣号">
                {{ craftBillDetail.sampleCode }}
              </a-descriptions-item>
              <a-descriptions-item label="品名">
                {{ craftBillDetail.sampleName }}
              </a-descriptions-item>
              <a-descriptions-item label="部门">
                {{ craftBillDetail.department }}
              </a-descriptions-item>
              <a-descriptions-item label="业务员">
                {{ craftBillDetail.auderYwy }}
              </a-descriptions-item>
              <a-descriptions-item label="工艺师">
                {{ craftBillDetail.crafter }}
              </a-descriptions-item>
              <a-descriptions-item label="封样人">
                {{ craftBillDetail.sealer }}
              </a-descriptions-item>
              <a-descriptions-item label="电话">
               
              </a-descriptions-item>
              <a-descriptions-item label="打印时间">
               
              </a-descriptions-item>
            </a-descriptions> -->
          
          <a-row style="border-bottom: 1px solid;" >
            <a-col :span="3" class="title">款号</a-col>
            <a-col :span="3" class="text">{{ craftBillDetail.designName }}</a-col>
            <a-col :span="3" class="title">样衣号</a-col>
            <a-col :span="3" class="text">{{ craftBillDetail.sampleCode }}</a-col>
            <a-col :span="3" class="title">品名</a-col>
            <a-col :span="3" class="text">{{ craftBillDetail.sampleName }}</a-col>
            <a-col :span="3" class="title">部门</a-col>
            <a-col :span="3" class="text">{{ craftBillDetail.department }}</a-col>
            
          </a-row>
          <a-row>
            <a-col :span="3" class="title">工艺师</a-col>
            <a-col :span="3" class="text">{{ craftBillDetail.crafter }}</a-col>
            <a-col :span="3" class="title">封样人</a-col>
            <a-col :span="3" class="text">{{ craftBillDetail.sealer }}</a-col>
            <a-col :span="3" class="title">业务员</a-col>
            <a-col :span="3" class="text">{{ craftBillDetail.auderYwy }}</a-col>
            <a-col :span="3" class="title">打印时间</a-col>
            <a-col :span="3" class="text">{{ this.nowDate }}</a-col>
          </a-row>
          </a-col>
        </a-row>
      </div>
      <div>
        <a-row style="border-width:0 1px;border-style: solid ;border-collapse: collapse; overflow: hidden;">
          <a-col :span="4">
            <a-row class="lastTitle"> 单位:cm </a-row>
            <a-row>
              <a-col :span="4" class="contentT"> 序号 </a-col>
              <a-col :span="6" class="contentT"> 号型/部位 </a-col>
              <a-col :span="14" class="contentT"> 成衣测量说明 </a-col>
            </a-row>
            <a-row>
              <a-row v-for="(item, i) in SizeDetail" :key="i">
                <a-col :span="4" class="contentH">
                  <span>{{ i+1 }}</span>
                </a-col>
                <a-col :span="6" class="contentH">
                  <span>{{ item.part }}</span>
                </a-col>
                <a-col :span="14" class="contentE">
                  <span>{{ item.clff }}</span>
                </a-col>
              </a-row>
            </a-row>
          </a-col>
          <a-col :span="20">
            <a-row class="lastTitle"> 成衣尺寸 </a-row>
            <a-row>
              <div style="display: flex; flex-wrap: wrap">
                <div v-for="(item, i) in sizeDetailList" :key="i" class="contentM" :style="{ width: `${100 / sizeDetailList.length}%` }">
                  {{ item.sizeid }}
                </div>
              </div>
            </a-row>
            <a-row>
              <div style="display: flex; flex-wrap: wrap">
                <div v-for="(item, i) in sizeDetailList" :key="i" class="contentM" :style="{ width: `${100 / sizeDetailList.length}%` }">
                  <div>{{ item.model }}</div>
                </div>
              </div>
            </a-row>
            <a-row>
              <div style="display: flex; flex-wrap: wrap">
                <div v-for="(item, i) in sizeDetailList" :key="i" :style="{ width: `${100 / sizeDetailList.length}%` }" style="display: flex; justify-content: space-around">
                  <div class="contentM" style="width: 20%">尺寸</div>
                  <div class="contentM" style="width: 20%">偏差1</div>
                  <div class="contentM" style="width: 20%">偏差2</div>
                  <div class="contentM" style="width: 20%">偏差3</div>
                  <div class="contentM" style="width: 20%">偏差4</div>
                </div>
              </div>
            </a-row>
            <a-row>
              <div style="display: flex; flex-wrap: wrap" v-for="(item, i) in SizeDetail" :key="i">
                <div v-for="(subitem, index) in sizeDetailList" :key="index" :style="{ width: `${100 / sizeDetailList.length}%` }">
                  <div>
                    <div v-for="(x, i) in item.info" :key="i" style="display:flex;">
                      <div v-if="x.sizeId == subitem.sizeid" class="inputRight" style="z-index: 100;width: 20%;padding: 0 3px;">
                        {{ x.sizeId == subitem.sizeid?x.sizeNum:null }}
                      </div>
                      <div v-if="x.sizeId == subitem.sizeid" class="inputRight" style="z-index: 100;width: 20%;padding: 0 3px;">
                        {{ x.diff }}
                      </div>
                      <div v-if="x.sizeId == subitem.sizeid" class="inputRight" style="z-index: 100;width: 20%;padding: 0 3px;">
                        {{ x.diff2 }}
                      </div>
                      <div v-if="x.sizeId == subitem.sizeid" class="inputRight" style="z-index: 100;width: 20%;padding: 0 3px;">
                        {{ x.diff3 }}
                      </div>
                      <div v-if="x.sizeId == subitem.sizeid" class="inputRight" style="z-index: 100;width: 20%;padding: 0 3px;">
                        {{ x.diff4 }}
                      </div>
                      <!-- <a-input
                        v-if="x.sizeId == subitem.sizeid"
                        v-model="x.sizeNum"
                        class="inputRight"
                        disabled="true"
                        type="number"
                        style="z-index: 100;width: 33.3%;padding: 0 3px;"
                      />
                      <a-input
                        v-if="x.sizeId == subitem.sizeid"
                        v-model="x.diff"
                        class="inputRight"
                        disabled="true"
                        type="string"
                        style="z-index: 100;width: 33.3%;padding: 0 3px;"
                      />
                      <a-input
                        v-if="x.sizeId == subitem.sizeid"
                        v-model="x.remark"
                        class="inputRight"
                        disabled="true"
                        type="string"
                        style="z-index: 100;width: 33.3%;padding: 0 3px;"
                      /> -->
                    </div>
                  </div>
                </div>
              </div>
            </a-row>
          </a-col>
        </a-row>
      </div>
      <div style="border: 1px solid ;border-collapse: collapse; overflow: hidden; text-align: center;border-top: none;">
        <a-row type="flex" justify="start" align="top">
          <a-col :span="24">
            <a-row>
              <a-col :span="24" style="text-align:left;height: 21px;line-height: 21px;color: black;font-size:14px;padding-left:5px">批版意见如下：</a-col>
            </a-row>
            <a-row >
              <a-col :span="24" style="text-align:left;color: black;padding-left:5px;font-size:12px;white-space:pre-line;">
                <div v-html="craftBillDetail.sealOpinion">  </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <!-- <a-row>
          <a-col :span="24">
            <a-descriptions bordered layout="vertical">
              <a-descriptions-item label="批版意见如下：" style="text-align: left">
                
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row> -->
        
      </div>
    </div>
  </a-card>
</template>

<script>
import { getFyBillDetail, getSealSizeList, getSizeList, getSealSizePrint } from '@api/rd/index'

export default {
  components:{},

  data() {
    return {
      billNo: '',
      ksBillNo: '',
      sampleCode: '',
      //nowDate: date,
      craftBillDetail: {},
      sizeDetailList: [],
      SizeDetail: [],
      sealPrintSize: [],
      partBillId: '',
      partId: ''
    }
  },
  mounted() {
    //this.getSizeDetail()
    this.getSealSizePrint()
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  created() {
    const billNo = this.$route.query.billNo
    const ksBillNo = this.$route.query.ksBillNo
    const sampleCode = this.$route.query.sampleCode
    const nowDate = new Date()
    const fullyear = nowDate.getFullYear()
    const month = nowDate.getMonth() + 1
    const today = nowDate.getDate()
    console.log(billNo)
    console.log(ksBillNo)
    //console.log(nowDate);
    if (billNo) {
      this.billNo = billNo
      this.ksBillNo = ksBillNo
      this.sampleCode = sampleCode
      this.nowDate = fullyear + '-' + ((month>9)?month:('0'+month)) + '-' + ((today>9)?today:('0'+today))
      this.$nextTick(() => {
        //this.getSealSizePrint()
        //this.getCraftBillDetial()
        this.getSizeList()
      })
    }
  },
  methods: {
    // async getSizeDetail() {
    //   const params = {
    //     billNo: this.billNo
    //   }
    //   try {
    //     const res = await getSealSizeList(params)
    //     if (res.code == 200) {
    //       this.SizeDetail = res.data
    //       if (this.SizeDetail) {
    //         this.partBillId = this.SizeDetail[0].billId
    //         this.partId = this.SizeDetail[0].id
    //       }
    //     } else {
    //       if (res.msg) {
    //         this.$message.error(res.msg)
    //       } else {
    //         this.$message.error('获取部位信息失败!')
    //       }
    //     }
    //   } catch (error) {
    //     this.$message.error('获取部位信息失败!')
    //   }
    // },
    async getSizeList() {
      const params = {
        sampleCode: this.sampleCode
      }
      //console.log(this.craftBillDetail)
      try {
        const res = await getSizeList('c17', params)
        if (res.code == 200) {
          this.sizeDetailList = res.data
          console.log(this.sizeDetailList)
          console.log(this.sealPrintSize)
          if (this.sealPrintSize.length > 0) {
            this.sizeDetailList.forEach((item,index) => {
              let size = this.sealPrintSize.filter(t => {
                return t.printSize == item.sizeid
              })
              if (size.length > 0) {
                item.isPrint = size[0].isPrint
              } else {
                item.isPrint = 'N'
              }
              this.$set(this.sizeDetailList, index, item)
            });
            this.sizeDetailList = this.sizeDetailList.filter(t => {
              return t.isPrint == 'Y'
            })
          }
          // this.sizeDetailList.map((item)=>{
          //   item.model = item.model.replace("/","\n")
          // })
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取尺寸失败!')
          }
        }
      } catch (error) {
        this.$message.error('获取尺寸失败!')
      }
    },
    // async getCraftBillDetial() {
    //   const params = {
    //     billNo: this.billNo
    //   }
    //   try {
    //     const res = await getFyBillDetail(params)
    //     if (res.code == 200) {
    //       this.craftBillDetail = res.data
    //       this.craftBillDetail.sealOpinion = res.data.sealOpinion.replace(/\r\n/g,"<br/>")
    //       this.getSizeList()
    //     } else {
    //       if (res.msg) {
    //         this.$message.error(res.msg)
    //       } else {
    //         this.$message.error('获取封样单失败！')
    //       }
    //     }
    //   } catch (error) {
    //     this.$messgae.error('获取封样单失败！')
    //   }
    // }
    async getSealSizePrint(){
      const params = {
        billNo: this.billNo
      }
      try{
        const res = await getSealSizePrint(params)
        if(res.code == 200){
          this.craftBillDetail = res.data
          //this.craftBillDetail.sealOpinion = res.data.sealOpinion.replace(/\r\n/g,"<br/>")
          //console.log(this.craftBillDetail)
          //this.getSizeList()
          this.SizeDetail = res.data.sealSize
          this.sealPrintSize = res.data.sealPrintSize

          console.log(this.sizeDetailList)
          console.log(this.sealPrintSize)
          if (this.sizeDetailList.length > 0) {
            this.sizeDetailList.forEach((item,index) => {
              let size = this.sealPrintSize.filter(t => {
                return t.printSize == item.sizeid
              })
              if (size.length > 0) {
                item.isPrint = size[0].isPrint
              } else {
                item.isPrint = 'N'
              }
              this.$set(this.sizeDetailList, index, item)
            });
            this.sizeDetailList = this.sizeDetailList.filter(t => {
              return t.isPrint == 'Y'
            })
          }
        } else {
          if(res.msg){
            this.$message.error(res.msg)
          } else {
            this.$message.error("获取封样单失败!")
          }
        }
      } catch (error) {
        this.$message.error("获取封样单失败!")
      }
    }
  }
}
</script>


<style scoped>
.contentH {
  border-bottom: 1px solid;
  border-right: 1px solid;
  /* border-collapse: collapse; */
  height: 36px;
  /* line-height: 40px; */
  font-size: 12px;
  text-align: center;
  color: black;
  /* line-height: 40px; */
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contentE {
  border-bottom: 1px solid;
  border-right: 1px solid;
  /* border-collapse: collapse; */
  height: 36px;
  font-size: 12px !important;
  text-align: center;
  /* line-height: 40px; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-weight: 500;
  overflow: hidden;
}
.contentT {
  border-bottom: 1px solid;
  border-right: 1px solid;
  /* border-collapse: collapse; */
  height: 54px;
  font-size: 12px;
  text-align: center;
  line-height: 54px;
  font-weight: 500;
  color: black;
  /* display: flex;
  align-items: center;
  justify-content: center; */
}
.contentM {
  border-bottom: 1px solid;
  border-right: 1px solid;
  /* border-collapse: collapse; */
  height: 18px;
  font-size: 12px;
  text-align: center;
  /* white-space: pre-line; */
  line-height: 18px;
  font-weight: 500;
  color: black;
}
.lastTitle {
  font-size: 14px;
  font-weight: 500;
  background: #fafafa;
  line-height: 21px;
  border-bottom: 1px solid ;
  border-right: 1px solid;
  /* border-collapse: collapse; */
  height: 21px;
  text-align: center;
  color: black;
}
.steps-content {
  margin-top: 16px;
  text-align: center;
}
.inputRight{
  border-right: 1px solid;
  border-bottom: 1px solid;
  color: black;
  font-size: 12px;
  text-align: center;
  height: 36px;
  /* align-items: center; */
  line-height: 36px;
}
.title {
  font-weight: 500;
  border-right: 1px solid;
  text-align: center;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  height: 21px;
  line-height: 21px;
  font-size: 14px;
}
.text {
  /* font-size: 18px; */
  color: black;
  text-align: center;
  border-right: 1px solid;
  height: 21px;
  line-height: 21px;
  /* vertical-align: middle; */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:12px;
}
.ant-descriptions{
  border: 1px solid black;
}
.ant-descriptions tr,.ant-descriptions tr th{
  border-bottom: 1px solid black !important;
}
/* .ant-descriptions-item-label{
  border-right: 1px solid black;
} */
</style>
